<template>
  <div ref="pageComBox" class="all_into_page page_wrapper">
    <div ref="otherBox">
      <!-- 搜索区域 开始 -->
      <div class="search_box">
        <!-- <el-form :model="searchForm" :inline="true" size="small">
        <el-form-item label="姓名：">
          <el-input v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话：">
          <el-input v-model="searchForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="城市：">
          <el-input v-model="searchForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="前端顾问：">
          <el-input v-model="searchForm.employeeName"></el-input>
        </el-form-item>
        <el-form-item label="查询日期：">
          <el-date-picker v-model="searchForm.searchTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        </el-form-item>
      </el-form> -->
      </div>
      <!-- 搜索区域 end -->

      <!-- 操作区域 开始 -->
      <div class="link_groups">
        <el-button type="primary" size="mini" @click="openDialog()"
          >新增标签</el-button
        >
      </div>
      <!-- 操作区域 end -->
    </div>

    <!-- 列表区域 开始 -->
    <div class="">
      <el-table
        ref="multipleTable"
        class="el_table"
        :data="dataList"
        border
        :max-height="tableHeight"
        :key="tableHeight"
        v-tabscroll="$getTableHeight"
      >
        <el-table-column
          label="序号"
          type="index"
          width="80"
          align="center"
        ></el-table-column>
        <el-table-column label="标签名称" prop="name"></el-table-column>
        <el-table-column label="状态" prop="mobile">
          <template slot-scope="{ row }">{{ row.sex }}</template>
        </el-table-column>
        <el-table-column label="创建人" prop="createBy"></el-table-column>
        <el-table-column label="创建日期" prop="createDate"></el-table-column>
        <el-table-column label="修改人" prop="updateBy"></el-table-column>
        <el-table-column label="修改日期" prop="updateDate"></el-table-column>
        <el-table-column label="操作" prop="" width="120" align="center">
          <template slot-scope="{ row }">
            <!-- <el-button type="primary" size="mini">编辑</el-button> -->
            <el-button type="danger" size="mini" @click="remove(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <BasePagination
        v-model="page"
        :total="totalCount"
        @change="pageOnChange"
      />
    </div>
    <!-- 列表区域 end -->

    <!-- 新增标签弹框 开始 -->
    <glsx-dialog
      :show="showDialog"
      title="新增标签"
      width="30%"
      @close="closeDialog()"
    >
      <div>
        <el-form
          ref="addForm"
          :model="addForm"
          :rules="addFormRules"
          label-width="120px"
          size="small"
        >
          <el-form-item label="标签名称：" prop="name">
            <el-input
              v-model.trim="addForm.name"
              placeholder="请输入标签名称"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="标签状态：">
            <el-select v-model="addForm.status" placeholder="请选择">
              <el-option label="正常" value="1"></el-option>
              <el-option label="已删除" value="2"></el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" size="small" @click="saveInfo"
          >保存</el-button
        >
        <el-button type="default" size="small" @click="closeDialog"
          >取消</el-button
        >
      </div>
    </glsx-dialog>
    <!-- 新增标签弹框 end -->
  </div>
</template>
<script>
import { deepClone, showModal, showToast } from "@/utils/util";
import {
  GET_ALL_TAGS_LIST,
  DEL_TAGS_INFO,
  ADD_TAGS_INFO,
} from "@/http/customer";
import GlsxDialog from "@/components/Dialog";
export default {
  components: {
    GlsxDialog,
  },
  data() {
    return {
      searchForm: {},
      page: 1,
      pageSize: 100,
      dataList: [],
      totalCount: 0,
      showDialog: false,
      addForm: {},
      addFormRules: {
        name: [{ required: true, message: "请输入标签名称", trigger: "blur" }],
      },
      tableHeight: 0,
    };
  },
  mounted() {
    this.getList();
    // 计算表格的高度
    let _this = this;
    this.$getTableHeight();
    window.onresize = function () {
      _this.$getTableHeight();
    };
  },
  methods: {
    // 分页切换事件
    pageOnChange(row) {
      this.page = row.page;
      if (row.pageSize) {
        this.pageSize = row.pageSize;
      }
      this.getList();
    },

    // 获取参数
    getParams() {
      const oParams = {};
      const o = deepClone(this.searchForm);
      oParams.size = this.pageSize;
      oParams.paramObject = o;
      return oParams;
    },

    // 获取列表
    getList(current) {
      const oParams = this.getParams();
      oParams.page = current || this.page;
      GET_ALL_TAGS_LIST(oParams).then((res) => {
        this.dataList = res.data || [];
      });
    },

    // 删除
    remove(row) {
      let _this = this;
      showModal({
        message: `确定删除${row.name}标签吗？`,
        showCancelButton: true,
        type: "warning",
        success: function () {
          let oParams = {};
          oParams.id = row.id;
          DEL_TAGS_INFO(oParams).then((res) => {
            if (res.code == 200) {
              showToast({
                message: "删除成功",
                type: "success",
              });
              _this.getList();
            }
          });
        },
      });
    },

    // 打开新增弹框
    openDialog() {
      this.showDialog = true;
    },

    // 关闭弹框
    closeDialog() {
      this.showDialog = false;
    },

    // 保存标签
    saveInfo() {
      let _this = this;
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = deepClone(_this.addForm);
        oParams.status = 1;
        ADD_TAGS_INFO(oParams).then((res) => {
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.closeDialog();
            _this.getList();
          }
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.all_into_page {
  padding: 20px;
  .show_tips {
    font-size: 14px;
    color: #666;
    line-height: 2;
    margin: 10px 0;
  }
}
</style>
